<template>
    <div class="defLayout">
        <div class="swiper">
            <swiper-box></swiper-box>
        </div>
        <div v-for="item in list" :key="item.id">
            <template v-if="item.goto === 'av'">
                <video-item
                    :bvid="item.bvid"
                    :id="item.id"
                    :cid="item.cid"
                    :owner="item.owner"
                    :duration="item.duration"
                    :title="item.title"
                    :stat="item.stat"
                    :pubdate="item.pubdate"
                    :rcmd_reason="item.rcmd_reason"
                    :pic="item.pic"
                ></video-item>
            </template>
            <template v-else-if="item.goto === 'ad'">
                <ad-item
                    :bvid="item.business_info.bvid"
                    :id="item.business_info.id"
                    :cid="item.business_info.cid"
                    :title="item.business_info.title"
                    :pic="item.business_info.pic"
                    :name="item.business_info.adver_name"
                ></ad-item>
            </template>
        </div>
        <div class="cardBox">
            <after-box></after-box>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import swiperBox from './swiper.vue'
import afterBox from './afterBox.vue'
import { get } from '@/http/axios'
import { videoItem,adItem } from '../components'
import { defaultRcmd } from '@/configs/dropLoadViode'

let list = ref()
onBeforeMount(() => {
    initData()
})
function initData(){
    get(defaultRcmd).then(res=>{
        list.value = res.data.item
    }).catch(err => {
        console.log('报错啦--刷新视频加载错误,去官网查/x/web-interface/wbi/index/top/feed/rcmd 更新即可-');
    })
}

defineExpose({
    initData
})
</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .defLayout{
        height: calc(210px * 3 + 40px * 2);
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(3,210px);
    }
    .swiper{
        height: calc(100% - 74px);
    }
    .cardBox{
        grid-area: 3/4/4/5;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .defLayout{
        height: calc(220px * 3 + 40px * 2);
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,220px);
    }
    .swiper{
        height: calc(100% - 78.222px);
    }
    .cardBox{
        grid-area: 3/5/4/6;
    }
}

@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .defLayout{
        height: calc(260px * 3 + 40px * 2);
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,260px);
    }
    .swiper{
        height: calc(100% - 90px);
    }
    .cardBox{
        grid-area: 3/5/4/6;
    }
}
p{
    padding: 0;
    margin: 0;
}
.defLayout{
    width: 90%;
    overflow: hidden;
    display: grid;
    gap: 40px 20px;
}
.swiper{
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    grid-column: span 2;
    grid-row: span 2;
}
</style>